/**
 *
 * Created by levy on 16/6/14.
 */
/**
 * TODO: 使用本组件时,好像不能在外层getUser后再render. finger/index.js 踩过坑
 * mui滑动图片组件, 传imgList则只渲染图片，传itemList则不是图片, 项目未加载之前有loading
 * imgList: img src array join with ,
 * itemList: array join with , 已经渲染好的元素列表
 *     以上两个必填一个
 * noItem: itemList为空时的呈现内容。
 *         default 默认为文字：暂无记录;
 *         可传自定义内容
 *         注意，如果不传值，则给出现默认暂无记录样式
 * height(rem): number; default 100%
 * width(rem): number; default 100%
 *     以上两个主要配合imgList使用
 * addClass: add more css class of this slider; default ''
 * indicator: true, 传个true意思一下，反正有值就显示slider的指示器，也即那些小圆点
 * fn: 父组件定义的函数,会把 mui-slider 这个节点作为参数传过去, DidUpdate时调用(此时才有真正的数据),
 *
 * autoPlay: 传值就自动播放
 * interval: 播放间隔时间,默认3000毫秒
 * loop: 传值就循环播放,只支持图片
 *
 * 温馨提示: 必须保证DidMount时, list中必须有内容.不然永远滑动不了, 这是理解源码的关键点
 */
var MuiSlider = React.createClass({
    render: function () {
        var props = this.props,
            height = typeof(props.height) == 'string' ? props.height + 'rem' : '2.1rem',
            width = typeof(props.width) == 'string' ? props.width + 'rem' : '100%',
            cls = props.addClass || '',
            imgList = (props.imgList && props.imgList.length) ? props.imgList : [liefeng.imgUrl.none],
            itemList = props.itemList,
            isItem = itemList ? true : false,
            sliderItems,
            loop = props.loop,
            loopStart,
            loopEnd,
            groupClass = '',
            indicators = [];

        if(itemList && itemList.length){
            sliderItems = itemList.map(function (item) {
                return (
                    <div className="mui-slider-item">
                        {item}
                    </div>
                )
            });

        }
        else {
            if(imgList[0] == liefeng.imgUrl.none) {
                //占位图片
                sliderItems = <div className="mui-slider-item">
                    <a href="#"  className="placeholder ele-relative" style={{width: width}}>
                        <img style={{width:'auto'}} src={liefeng.imgUrl.none} />
                    </a>
                </div>
            }
            else {
                sliderItems = imgList.map(function (img) {
                    return (
                        <div className="mui-slider-item" style={{width: width, height: height}}>
                            <a href="#"><img src={img} /></a>
                        </div>
                    )
                });
            }


            if(loop){
                var len = imgList.length;
                groupClass = ' mui-slider-loop ';

                loopStart = <div className="mui-slider-item mui-slider-item-duplicate">
                    <a href="#" style={{width: width, height: height}}><img src={imgList[len-1]} /></a>
                </div>;
                loopEnd = <div className="mui-slider-item mui-slider-item-duplicate">
                    <a href="#" style={{width: width, height: height}}><img src={imgList[0]} /></a>
                </div>;
            }
        }

        var itemCount = isItem ? itemList.length : imgList.length,
            noItem = itemCount > 0 ? '' : (props.noItem || 'default'),
            loadingClass = (itemCount <= 0) ? '' : 'ele-hide';
        groupClass += itemCount > 0 ? '' : 'ele-hide';

        //有并且大于1个
        if(props.indicator && itemCount > 1){
            indicators.push(<div className="mui-indicator mui-active"></div>);
            for(var i = 1; i < itemCount; i++){
                indicators.push(<div className="mui-indicator"></div>);
            }
        }
        //{
        //	noItem == 'default'
        //		?
        //		<div className="flex-center no-item">暂无记录</div>
        //		: noItem
        //}
        return(

            <div className={cls + ' mui-slider'} ref="muiSlider">
                <div className={"mui-slider-group " + groupClass}>
                    { (!isItem && loop) ?
                        [{
                            loopStart,
                            sliderItems,
                            loopEnd,
                        }]
                        :
                    {sliderItems}
                    }
                </div>
                {   itemCount > 1
                    ?
                    <div className="mui-slider-indicator">{indicators}</div>
                    : ''
                }
                <div className={"flex-center loading-box " + loadingClass}>
                    <span className="mui-spinner"></span>
                </div>
            </div>
        )
    },
    componentDidMount() {
       this.playImg();
    },
    componentDidUpdate(prevProps,prevState){
        this.playImg();
    },
    playImg(){
        var imgList = this.props.imgList || [],
            itemList = this.props.itemList || [];
        if(imgList.length || itemList.length){
            var fn = this.props.fn;
            fn && fn(React.findDOMNode(this.refs.muiSlider));

            if(this.props.autoPlay){
                mui(React.findDOMNode(this.refs.muiSlider)).slider({
                    interval:this.props.interval || 3000//自动轮播周期，若为0则不自动播放
                });
            }
        }
    },
    componentWillReceiveProps: function (nextProps) {
    }
});

export default MuiSlider;
